<%@ page import="com.atguigu.service.impl.ServiceServiceImpl" %>
<%@ page import="com.atguigu.service.ServiceService" %>
<%@ page import="com.atguigu.service.ServerService" %>
<%@ page import="com.atguigu.service.impl.ServerServiceImpl" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/pages/common/headAndWelcome.jsp" %><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>
<title>${server.name}${service.name}的内部配置</title>

<%--<div class="container-fluid "> <!--table行-->--%>
    <h1 class="text-center">${server.name}/<span class="uppercase">${service.name}</span> service配置页面<span class="red"></span></h1>
    <div class="container tomcatContainer
        <c:if test="${not empty requestScope.tomcatAndHeartbeatServiceConfig}">
            hidden
        </c:if>
    " divDeployType="tomcat" style="width: 800px">
        <table class="table table-striped table-bordered table-hover col-md-6 col-lg-6 tomcat" style="table-layout:inherit">
            <thead class="thead">
            <tr>
                <!--<th><input type="checkbox" id="selectall"> 全选</th>-->
                <th class="col-md-1 ">编号</th>
                <th class="col-md-2">key</th>
                <th class="col-md-6 text-center">value
                    <div class="btn-group">
                        <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                        <div class="btn btn-default glyphicon glyphicon-list-alt config hand" title="详细配置"></div>
                        <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                    </div>
                </th>
            </tr>
            </thead>
            <tbody>
            <form role="form">
                <% Integer count=1;%>
                <tr class="tr"><!--tomcatHome-->
                    <td class="number">
                        <input type="checkbox">
                        <%=count++%>
                    </td>
                    <td class="key">tomcatDeployType</td>
                    <td class="value">
                        <select name="tomcatDeployType" class="tomcatDeployTypeEdit valueEdit form-control col-sm-2">>
                            <option value="tomcat" selected="selected">tomcat</option>
                            <option value="tomcatAndHeartbeat">tomcatAndHeartbeat</option>
                        </select>
                    </td>
                </tr><!--tomcatDeployType-->
                <tr class="tr"><!--tomcatHome-->
                    <td class="number">
                        <input type="checkbox">
                        <%=count++%>
                    </td>
                    <td class="key">tomcatHome</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatServiceConfig.tomcatHome}" class="form-control valueEdit" placeholder="如:/lhwl/app/tomcat9-prd-3.0-shanghai-bigData">
                    </td>
                </tr><!--tomcatHome-->
                <tr class="tr"><!--javaHome-->
                    <td class="number">
                        <input type="checkbox">
                        <%=count++%>
                    </td>
                    <td class="key">javaHome</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatServiceConfig.javaHome}" class="form-control valueEdit" placeholder="如:/lhwl/app/jdk1.14">
                    </td>
                </tr><!--javaHome-->
                <tr class="tr"><!--maxMemory-->
                    <td class="number">
                        <input type="checkbox">
                        <%=count++%>
                    </td>
                    <td class="key">maxMemory</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatServiceConfig.maxMemory}" class="form-control valueEdit" placeholder="如:4">
                    </td>
                </tr><!--maxMemory-->
                <tr class="tr"><!--httpPort-->
                    <td class="number">
                        <input type="checkbox">
                        <%=count++%>
                    </td>
                    <td class="key">httpPort</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatServiceConfig.httpPort}" class="form-control valueEdit" placeholder="如:8080">
                    </td>
                </tr><!--httpPort-->
                <tr class="tr"><!--shutdownPort-->
                    <td class="number">
                        <input type="checkbox">
                        <%=count++%>
                    </td>
                    <td class="key">shutdownPort</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatServiceConfig.shutdownPort}" class="form-control valueEdit" placeholder="如:8005">
                    </td>
                </tr><!--shutdownPort-->
                <tr class="tr"><!--project-->
                    <td class="number">
                        <input type="checkbox">
                        <%=count++%>
                    </td>
                    <td class="key">project</td>
                    <td class="value">
                        <select name="project" class="projectEdit valueEdit form-control col-sm-2">>
                            <c:forEach items="${requestScope.projectsTomcat}" var="project" varStatus="projectStatus">
                                <option value="${project.id}"
                                        <c:if test="${requestScope.tomcatServiceConfig.projectId==project.id}">selected="selected"</c:if>
                                >${project.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr><!--project-->
                <tr class="tr"><!--module-->
                    <td class="number">
                        <input type="checkbox">
                        <%=count++%>
                    </td>
                    <td class="key">module</td>
                    <td class="value">
                        <select name="projectModule" class="projectModuleEdit valueEdit form-control col-sm-2">
                            <c:forEach items="${requestScope.projectModulesTomcat}" var="projectModule" varStatus="projectModuleStatus">
                                <option value="${projectModule.id}"
                                        <c:if test="${requestScope.tomcatServiceConfig.moduleId==projectModule.id}">selected="selected"</c:if>
                                >${projectModule.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr><!--module-->
                <tr class="tr"><!--shutdownPort-->
                    <td class="number">
                        <input type="checkbox">
                        <%=count++%>
                    </td>
                    <td class="key">use</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatServiceConfig.use}" class="form-control valueEdit" placeholder="如:上海:大数据">
                    </td>
                </tr><!--use-->
                <tr class="tr hidden"><!--heartbeat-->
                    <td class="number">
                        <input type="checkbox">
                        <%=count++%>
                    </td>
                    <td class="key">heartbeat</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatServiceConfig.heartbeat}" class="form-control valueEdit" placeholder="如:心跳检测api:api/heartbeat;返回值:success|error">
                    </td>
                </tr><!--heartbeat-->
            </form>
            </tbody>
        </table><!--tomcat主服务区-->
    </div>
    <div class="container tomcatAndHeartbeatContainer
        <c:if test="${empty requestScope.tomcatAndHeartbeatServiceConfig}">
            hidden
        </c:if>
    " divDeployType="tomcatAndHeartbeat" style="width: 800px">
        <table class="table table-striped table-bordered table-hover col-md-6 col-lg-6 tomcat" style="table-layout:inherit">
            <thead class="thead">
            <tr>
                <!--<th><input type="checkbox" id="selectall"> 全选</th>-->
                <th class="col-md-1 ">编号</th>
                <th class="col-md-2">key</th>
                <th class="col-md-6 text-center">value
                    <div class="btn-group">
                        <div class="btn btn-default glyphicon glyphicon-ok update hand"></div>
                        <div class="btn btn-default glyphicon glyphicon-list-alt config hand" title="详细配置"></div>
                        <div class="btn btn-default glyphicon glyphicon-remove delete hand"></div>
                    </div>
                </th>
            </tr>
            </thead>
            <tbody>
            <form role="form">
                <% Integer countTomcatAndHeartbeat=1;%>
                <tr class="tr"><!--tomcatHome-->
                    <td class="number">
                        <input type="checkbox">
                        <%=countTomcatAndHeartbeat++%>
                    </td>
                    <td class="key">tomcatDeployType</td>
                    <td class="value">
                        <select name="tomcatDeployType" class="tomcatDeployTypeEdit valueEdit form-control col-sm-2">>
                            <option value="tomcat" >tomcat</option>
                            <option value="tomcatAndHeartbeat" selected="selected">tomcatAndHeartbeat</option>
                        </select>
                    </td>
                </tr><!--tomcatDeployType-->
                <tr class="tr"><!--tomcatHome-->
                    <td class="number">
                        <input type="checkbox">
                        <%=countTomcatAndHeartbeat++%>
                    </td>
                    <td class="key">tomcatHome</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatAndHeartbeatServiceConfig.tomcatHome}" class="form-control valueEdit" placeholder="如:/lhwl/app/tomcat9-prd-3.0-shanghai-bigData">
                    </td>
                </tr><!--tomcatHome-->
                <tr class="tr"><!--javaHome-->
                    <td class="number">
                        <input type="checkbox">
                        <%=countTomcatAndHeartbeat++%>
                    </td>
                    <td class="key">javaHome</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatAndHeartbeatServiceConfig.javaHome}" class="form-control valueEdit" placeholder="如:/lhwl/app/jdk1.14">
                    </td>
                </tr><!--javaHome-->
                <tr class="tr"><!--maxMemory-->
                    <td class="number">
                        <input type="checkbox">
                        <%=countTomcatAndHeartbeat++%>
                    </td>
                    <td class="key">maxMemory</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatAndHeartbeatServiceConfig.maxMemory}" class="form-control valueEdit" placeholder="如:4">
                    </td>
                </tr><!--maxMemory-->
                <tr class="tr"><!--httpPort-->
                    <td class="number">
                        <input type="checkbox">
                        <%=countTomcatAndHeartbeat++%>
                    </td>
                    <td class="key">httpPort</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatAndHeartbeatServiceConfig.httpPort}" class="form-control valueEdit" placeholder="如:8080">
                    </td>
                </tr><!--httpPort-->
                <tr class="tr"><!--shutdownPort-->
                    <td class="number">
                        <input type="checkbox">
                        <%=countTomcatAndHeartbeat++%>
                    </td>
                    <td class="key">shutdownPort</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatAndHeartbeatServiceConfig.shutdownPort}" class="form-control valueEdit" placeholder="如:8005">
                    </td>
                </tr><!--shutdownPort-->
                <tr class="tr"><!--project-->
                    <td class="number">
                        <input type="checkbox">
                        <%=countTomcatAndHeartbeat++%>
                    </td>
                    <td class="key">project</td>
                    <td class="value">
                        <select name="project" class="projectEdit valueEdit form-control col-sm-2">>
                            <c:forEach items="${requestScope.projectsTomcatAndHeartbeat}" var="project" varStatus="projectStatus">
                                <option value="${project.id}"
                                        <c:if test="${requestScope.tomcatAndHeartbeatServiceConfig.projectId==project.id}">selected="selected"</c:if>
                                >${project.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr><!--project-->
                <tr class="tr"><!--module-->
                    <td class="number">
                        <input type="checkbox">
                        <%=countTomcatAndHeartbeat++%>
                    </td>
                    <td class="key">module</td>
                    <td class="value">
                        <select name="projectModule" class="projectModuleEdit valueEdit form-control col-sm-2">
                            <c:forEach items="${requestScope.projectModulesTomcatAndHeartbeat}" var="projectModule" varStatus="projectModuleStatus">
                                <option value="${projectModule.id}"
                                        <c:if test="${requestScope.tomcatAndHeartbeatServiceConfig.moduleId==projectModule.id}">selected="selected"</c:if>
                                >${projectModule.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr><!--module-->
                <tr class="tr"><!--shutdownPort-->
                    <td class="number">
                        <input type="checkbox">
                        <%=countTomcatAndHeartbeat++%>
                    </td>
                    <td class="key">use</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatAndHeartbeatServiceConfig.use}" class="form-control valueEdit" placeholder="如:上海:大数据">
                    </td>
                </tr><!--use-->
                <tr class="tr"><!--heartbeat-->
                    <td class="number">
                        <input type="checkbox">
                        <%=countTomcatAndHeartbeat++%>
                    </td>
                    <td class="key">heartbeat</td>
                    <td class="value">
                        <input type="text" value="${requestScope.tomcatAndHeartbeatServiceConfig.heartbeat}" class="form-control valueEdit" placeholder="如:心跳检测api:api/heartbeat;返回值:success|error">
                    </td>
                </tr><!--heartbeat-->
            </form>
            </tbody>
        </table><!--tomcatAndHeartbeat主服务区-->
    </div>

    <form class="bs-example bs-example-form dropdownAndInputForm changeTarget hidden" role="form">
        <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="text">二级</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdownAndInput">
                            <li>
                                <a class="option">nginx</a>
                            </li>
                            <li>
                                <a class="option">php</a>
                            </li>
                            <li>
                                <a class="option">tomcat</a>
                            </li>
                        </ul>
                    </div><!-- /btn-group -->
                    <input type="text" class="form-control input" style="width: 100px">
                </div><!-- /input-group -->
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
    </form> <!--这一区域默认是隐藏的,其负责给点击"服务和容器"添加数据-->
    <div class="modal fade " id="update" tabindex="-1" role="dialog" aria-labelledby="updateLabel" aria-hidden="true">
        <!--这一区域是用来为update行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="updateLabel">提交修改</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitUpdate">提交更改</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为update行为提供模态框的-->
    <div class="modal fade " id="delete" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
        <!--这一区域是用来为delete行为提供模态框的-->
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="deleteLabel">提交删除</h4>
                </div>
                <div class="modal-body">是否确认?</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="submitDelete">提交删除</button>
                </div>
            </div>
        </div>
    </div><!--这一区域是用来为delete行为提供模态框的-->
    <p>config按钮要做成跳转的,在后台拿到配置文件在前台做textarea  创建 定义 配置 (详细配置 生成服务)</p>
<%--</div>--%>
<!--table行-->
</body>
<script>
    $("table").click(function (event) {//detail 操作模块的点击事件,利用冒泡
        let eventTarget = $(event.target);
        let table=$(eventTarget).closest("table");
        if (eventTarget.hasClass('update')) {//此时,已经明确了触发事件的元素是"create"元素,下一步获取整个tr-json对象
            if (eventTarget.closest("table").find(".form-control").length>0) {
                $("#update").modal("show")
                $('.yaotijiaodedian').remove('yaotijiaodedian')
                $(eventTarget).addClass("yaotijiaodedian")
            } else {
                confirm("没有修改,不能提交")
            }
        }//此时,已经明确了触发事件的元素是"update"元素,下一步获取整个tr-json对象
        if (eventTarget.hasClass('delete')) {//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id
            $("#delete").modal("show")
            $('.yaotijiaodedian').remove('yaotijiaodedian')
            $(eventTarget).addClass("yaotijiaodedian")
        }//此时,已经明确了触发事件的元素是"delete"元素,下一步获取整个tr-id

    })//table 的点击事件,利用冒泡
    $(".tomcatDeployTypeEdit").change(function (event){
        let eventTarget=$(event.target)
        $(".container").addClass("hidden")
        $("."+eventTarget.val()+"Container").removeClass("hidden").find(".tomcatDeployTypeEdit").val(eventTarget.val())
    })
    $(".projectEdit").change(function (event){
        let eventTarget = $(event.target);
        let data={}
        data.projectId=eventTarget.val()
        data.projectModuleType=eventTarget.closest(".container").attr("divDeployType")
        //console.log(data)
        $.ajax({
            type: "post",
            url: "<%=basepath%>projectServlet?action=getProjectModules",
            data: data,
            success: function (response, status, xhr) {
                //console.log("收到回信")
                //console.log(response)
                //console.log(JSON.parse(response));
                $(".projectModuleEdit").html("")
                $.each(JSON.parse(response),function (index,element){
                    //console.log(index)
                    //console.log(element.id)
                    let optionObj=$("<option/>")
                    optionObj.val(element.id)
                    optionObj.text(element.name)
                    $(".projectModuleEdit").append(optionObj)
                })
                //console.log($(".projectModule").val())
            },
            timeout: 10000, //如果超时1000毫秒，就结束
            error: function (xhr, errorText, errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:" + errorText); //error
                console.log("errorType:" + errorType); //not found
                console.log("xhr.status:" + xhr.status); //404
                console.log("xhr.statusText:" + xhr.statusText); //not found
            },
            dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//ajax for tomcat
    })

    $("#submitUpdate").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        //console.log(1)
        let eventTarget = $('.yaotijiaodedian')
        let trObj = {};
        let containerObj=eventTarget.closest(".container");
        trObj["serviceId"]="${service.id}";
        trObj["configType"]=containerObj.attr("divDeployType")
        // trObj["parameters"]="{"
        containerObj.find(".tr").each(function (index,element){
            let key=$(element).find(".number:first").text()
            let valueObjKey=$(element).find(".key:first").text()
            let valueObjValue=$(element).find(".valueEdit:first").val()
            if(valueObjValue==""){
                if(valueObjKey=="heartbeat"){

                }else {
                    alert(valueObjKey+" 不能为空")
                    throw SyntaxError();//用于停止js,而不仅仅是停止for循环
                }
            }else {
                trObj[valueObjKey]=valueObjValue;
            }
        })//收集参数
        // console.log(trObj)
        // return
        //console.log(trObj)
        // return
        //console.log(trObj)
        //return
        $.ajax({
            type: "post",
            url: "<%=basepath%>serviceServlet?action=ajaxConfigService",
            data: trObj,
            success: function (response, status, xhr) {
                console.log("收到回信")
                console.log(response)
                if (response == "存入成功") {
                    //console.log("存入成功")
                    alert("存入成功")
                    location.href = "<%=basepath%>serviceServlet?action=ajaxConfigService&serviceId=${service.id}";
                } else {
                    alert("存入失败,请看consoleLog");
                }
            },
            timeout: 10000, //如果超时1000毫秒，就结束
            error: function (xhr, errorText, errorType) { //错误后的行为
                console.log("回信异常")
                console.log("errorText:" + errorText); //error
                console.log("errorType:" + errorType); //not found
                console.log("xhr.status:" + xhr.status); //404
                console.log("xhr.statusText:" + xhr.statusText); //not found
            },
            dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
        })//ajax
    })//这是更新的模态框点击了确定键后搜索数据并提交的过程
    $("#submitDelete").click(function () {//这是更新的模态框点击了确定键后搜索数据并提交的过程
        let eventTarget = $('.yaotijiaodedian')
        let containerObj=eventTarget.closest(".container");
        let data={"serviceId": "${service.id}","configType":containerObj.attr()}
        if(containerObj.hasClass("tomcat")){
            $.ajax({
                type: "post",
                url: "<%=basepath%>serviceServlet?action=ajaxConfigService&delete=true",
                data:data,
                success: function (response, status, xhr) {
                    console.log("收到回信")
                    console.log(response)
                    if (response == "删除成功") {
                        alert("删除成功")
                        location.href = "<%=basepath%>serviceServlet?action=ajaxConfigService&serviceId=${service.id}";
                    } else {
                        alert("删除失败");
                    }
                },
                timeout: 10000, //如果超时1000毫秒，就结束
                error: function (xhr, errorText, errorType) { //错误后的行为
                    console.log("回信异常")
                    console.log("errorText:" + errorText); //error
                    console.log("errorType:" + errorType); //not found
                    console.log("xhr.status:" + xhr.status); //404
                    console.log("xhr.statusText:" + xhr.statusText); //not found
                },
                dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
            })//ajax
        }

    })//这是删除的模态框点击了确定键后搜索数据并提交的过程

</script>
<!--表格点击事件-->
</html>
